<template>
  <div class="regionRadio">
    <template v-for="(item,index) in options">
      <div v-if="!item.hide" :key="index" :class="{'radio-item':true,active:activeIndex === index}" @click="itemClick(item,index)">
        <div class="item-l">
          <i :class="item.icon" style="font-size: 18px"/>
          {{item.title}}
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Emit} from 'vue-property-decorator';
import {getBigCategory} from '@/api/investCategory'
import {Getter} from 'vuex-class';
@Component({
  components: {}
})
export default class RegionRadio extends Vue {
  @Getter('departInfo') private departInfo!: any;
  private activeIndex = 0
  itemClick(item: any, index: number) {
    this.activeIndex = index
    if(item.type === 'category'){
      (this as any).$bus.$emit('categoryCheckedHandler',item);
    }else{
      this.$router.push(item.url);
    }
    
  }
  private options:any =[];

  @Emit('categoryCheckedHandler')
  categoryCheckedHandler(item){
    return item;
  }

  mounted(){
    if((this.departInfo.areaLevel === 3 || this.departInfo.areaLevel === 2) && this.departInfo.management ==='1') {
      this.options.push({
        url: '/quality/dataReport',
        id:'',
        title: '上报管理',
        icon: 'iconfont icon-y-jingpinceshibaogaoshujudaochu'
      });
    }

    getBigCategory().then(res =>{
        if(res && res.data){
          res.data.forEach(element => {
            this.options.push({'id':element.id,'title':element.name,'icon':'iconfont','type':'category'});
          });
          this.$store.dispatch('saveBigCategoryInfo',res.data)
        }
    }).catch(e=>{
      console.error(e);
    })
  }
}
</script>
<style lang="scss" scoped>
.regionRadio{
  display: flex;
  align-items: center;
  gap: 10px;
  .radio-item{
    height: 38px;
    padding: 0 16px;
    color: #006400;
    display: flex;
    align-items: center;
    .item-l{
      display: flex;
      align-items: center;
      text-align: center;
      font-size: 15px;
      cursor: pointer;
      gap: 8px;
    }
    &.active{
      color: white;
      text-align: center;
      transform: skew(-20deg);
      background: url("../assets/image/quat-radio-bg.png") no-repeat;
      background-size: 100% 100%;
      .item-l{
        transform: skew(20deg)
      }
    }
  }
}
</style>
